<template>
    <view class="get_record">
        <view class="get_record__list" v-if="list.length">
            <block v-for="(item, index) in list" :key="index">
                <view class="list-item flex-row-between" v-if="item.recLevelServeDiscount">
                    <view class="item-left flex-row-start">
                        <image class="item-icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon-1.png"></image>
                        <view>
                            服务费优惠
                            <text>{{ ((item.recLevelServeDiscount || 0) * 100) / 10 }}折</text>
                        </view>
                    </view>
                    <view class="item-right">领取时间：{{ item.createTime }}</view>
                </view>

                <view class="list-item flex-row-between" v-if="item.levelRewardAmount">
                    <view class="item-left flex-row-start">
                        <image class="item-icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon-2.png"></image>
                        <view>
                            奖励金
                            <text>{{ item.levelRewardAmount }}元</text>
                        </view>
                    </view>
                    <view class="item-right">领取时间：{{ item.createTime }}</view>
                </view>

                <view class="list-item flex-row-between" v-if="item.levelFreeServeTimes">
                    <view class="item-left flex-row-start">
                        <image class="item-icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon-3.png"></image>
                        <view>
                            免服务费
                            <text>{{ item.levelFreeServeTimes }}次</text>
                        </view>
                    </view>
                    <view class="item-right">领取时间：{{ item.createTime }}</view>
                </view>

                <view class="list-item flex-row-between" v-if="item.levelRewardIntegral">
                    <view class="item-left flex-row-start">
                        <image class="item-icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon-4.png"></image>
                        <view>
                            积分
                            <text>{{ item.levelRewardIntegral }}分</text>
                        </view>
                    </view>
                    <view class="item-right">领取时间：{{ item.createTime }}</view>
                </view>

                <view class="list-item" :data-index="index" @tap="selectDiscountsStatus">
                    <view class="flex-row-between">
                        <view class="item-left flex-row-start">
                            <image class="item-icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon-5.png"></image>
                            <view class="flex-row-start" style="white-space: nowrap">
                                优惠券
                                <text>{{ item.marketAppUserPayOrderCoupons.length }}张({{ item.allPrice }}元)</text>
                                <text :class="'jt ' + (item.selectDiscountsStatus ? 'up' : 'down')"></text>
                            </view>
                        </view>
                        <view class="item-right">领取时间：{{ item.createTime }}</view>
                    </view>
                    <view class="box-discounts" v-if="item.selectDiscountsStatus && item.marketAppUserPayOrderCoupons && item.marketAppUserPayOrderCoupons.length">
                        <view class="box-discounts__head flex-row-center">
                            <image class="head-bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/line_title.png"></image>
                            <view class="hig">优惠券x{{ item.marketAppUserPayOrderCoupons.length }}，价值{{ item.allPrice }}元</view>
                        </view>

                        <view class="box-discounts__tickets flex-row-start flex_wrap">
                            <view class="tickets-item flex-column-start" v-for="(item, index1) in item.marketAppUserPayOrderCoupons" :key="index1">
                                <image class="tickets-item__bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/hongbao_bg.png"></image>

                                <view class="tickets-item__title flex-row-center" v-if="item.type == 1">服务费券</view>

                                <view class="tickets-item__title flex-row-center" v-if="item.type == 2">电费券</view>

                                <view class="tickets-item__title flex-row-center" v-if="item.type == 3">现金券</view>

                                <view class="tickets-item__num">
                                    <text>￥</text>
                                    {{ item.couponAmount }}
                                </view>

                                <view class="tickets-item__desc">满{{ item.meetAmount }}可用</view>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
        </view>
        <Upgrading text="暂无数据" v-else />
    </view>
</template>

<script lang="ts">
import Upgrading from '@/marketing_page/components/upgrading/upgrading';
// marketing/pages/member/get_record/get_record.ts
// import { cancelCollectStation } from 'miniprogram/api/https'
import { getPayleMemberRaceRecord } from '../../../../api/marketing/payMember';
export default {
    components: {
        Upgrading
    },
    data() {
        return {
            data: {},
            list: [],
            id: '',
            config: {
                id: '',
                current: 1
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    async onLoad(o: any) {
        if (o.id) {
            this.setData({
                id: o.id,
                'config.id': o.id
            });
        }
        this.getPayleMemberRaceRecord();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        this.getPayleMemberRaceRecord();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        async getPayleMemberRaceRecord() {
            try {
                const res = await getPayleMemberRaceRecord(this.config);
                let data = res.data || {};
                let list = data.records || [];
                list.forEach((item: any) => {
                    item.createTime = item.createTime.split(' ')[0];
                    item.marketAppUserPayOrderCoupons = item.marketAppUserPayOrderCoupons || [];
                    let allPrice = 0;
                    item.marketAppUserPayOrderCoupons.forEach((item: any) => {
                        allPrice += item.couponAmount;
                    });
                    item.allPrice = allPrice.toFixed(2);
                });
                this.setData({
                    data,
                    list: [...this.list, ...list]
                });
                this.config.current++;
                console.log(res);
            } catch (error) {}
        },

        selectDiscountsStatus(e: any) {
            let list = this.list;
            let { index } = e.currentTarget.dataset;
            list[index].selectDiscountsStatus = !list[index].selectDiscountsStatus;
            this.setData({
                list
            });
        }
    }
}
</script>
<style lang="less" scoped>
	@import "../../../../commin/flex.less";
page {
    background-color: #f5f7fa;
}
.get_record {
    padding: 24rpx;
}
.get_record__list {
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    border: 2rpx solid #ffffff;
    box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.24);
    border-radius: 16rpx;
    padding: 0 30rpx;
}
.get_record__list .list-item {
    height: 115rpx;
    border-bottom: 1px dashed #c0c4cc;
}
.get_record__list .item-left {
    font-size: 30rpx;
    color: #606266;
}
.get_record__list .item-left text {
    margin-left: 8rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #fc724c;
}
.get_record__list .item-right {
    font-size: 24rpx;
    font-weight: 400;
    color: #606266;
}
.get_record__list .item-icon {
    width: 48rpx;
    height: 48rpx;
    margin-right: 15rpx;
}
</style>
